<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/code.js"></script>
    <!-- <link rel="stylesheet" href="../font/iconfont.css"> -->

    <style>
        .createCode {
            user-select: none;
        }

        .right {
            font-size: 12px;
            color: green;
        }

        .error {
            font-size: 12px;
            color: red;
        }
    </style>
</head>

<body>
    <!-- 阻止表单默认提交  -> JS提交(自己设置验证规则 => 全都成功之后在提交) -->
    <form class="box" onsubmit="return false">
        <p>
            <label for="">用户名:</label>
            <input type="text" class="user">
            <span class="user_span"></span>
        </p>
        <p>
            <label for="">密&emsp;码:</label>
            <input type="text" class="pwd">
            <span class="pwd_span"></span>
        </p>
        <p>
            <label for="">手机号:</label>
            <input type="text" class="phone">
            <span class="phone_span"></span>
        </p>
        <p>
            <label for="">邮&emsp;箱:</label>
            <input type="text" class="email">
            <span class="email_span"></span>
        </p>
        <p>
            <label for="">验证码:</label>
            <input type="text" class="code">
            <button class="createCode">a5b6</button>
            <span class="code_span"></span>
        </p>
        <p>
            <input class="btn" type="submit" value="注册">
        </p>
    </form>
</body>
<script>
    // 用户名
    // 由数字 大小写字母 _ $ 组成 , 6-12位,且不能以数字开头 (一步到位)

    // 从易到难的顺序(拆分判断)
    // a. 长度  6-12位
    // b. 不能以数字开头  
    // c. 由数字 大小写字母 _ $ 组成  (所有的字符都必须在合法字符的范围内,只要有一个不是合法的字符 报错   => 判断字符串中是否能含有非法字符)


    // 密码
    // 由数字 大小写字母 _ $ 组成   6-12位

    // 判断密码强度
    // 数字,大写,小写,特殊字符  中 只出现一种   11111   aaaaaa  AAAAAA   弱
    // 数字,大写,小写,特殊字符  中 出现2种      11111a  a1111   aAAAAA   中
    // 数字,大写,小写,特殊字符  中 出现3种      1aA     1Aa   A1a        强
    // 数字,大写,小写,特殊字符  中 出现4种      1aA_                     超强

    // 是否存在数字  / 大写 /小写 / 特殊字符

    // true + true + true + false  => 3

    // 手机号

    
    // 邮箱

    // !! 验证码:      ["a","b","c","d","e","f","g","h"]  => 从数组中随机四个字符形成验证码 (升级版: 不允许出现重复字符) 



    // 要求:
    // 1. 失焦时对 用户名 密码 手机号 邮箱 验证码 进行验证
    // 2. 用户名 密码 手机号 邮箱 全都正确的前提下  => 点击注册 弹出可以注册

</script>
<script type="module">
    import {AjaxPromise} from "../js/ajax.js"; 

    var userInp = document.getElementsByClassName("user")[0];
    var userSpan = document.getElementsByClassName("user_span")[0];

    var pwdInp = document.getElementsByClassName("pwd")[0];
    var pwdSpan = document.getElementsByClassName("pwd_span")[0];
    
    var phoneInp = document.getElementsByClassName("phone")[0];
    var phoneSpan = document.getElementsByClassName("phone_span")[0];
    
    var emailInp = document.getElementsByClassName("email")[0];
    var emailSpan = document.getElementsByClassName("email_span")[0];

    var codeInp = document.getElementsByClassName("code")[0];
    var codeSpan = document.getElementsByClassName("code_span")[0];

    var createCode = document.getElementsByClassName("createCode")[0];
    
    var btn = document.getElementsByClassName("btn")[0];

    
    var isUserOk = false;
    var isPwdOk = false;
    var isPhoneOk = false;
    var isEmailOk = false;

    createCode.textContent = randCode(4);

    createCode.onclick = function(){
        createCode.textContent = randCode(4);
    }



    // 用户名
    // 由数字 大小写字母 _ $ 组成 , 6-12位,且不能以数字开头 (一步到位)
    /* userInp.onblur = function(){
        var user = userInp.value.trim();
        console.log(user);
        userInp.value = user;

        var reg = /^[a-zA-Z_$][\w$]{5,11}$/;

        if(reg.test(user)){
            userSpan.textContent = "√";   

            // 如果同时添加内联样式较多 => 可以先将样式提取为一个class中,添加class名即可
            // userSpan.style.color = "green"; 
            // userSpan.style.fontSize = "12px"; 

            // class名切换的问题
            // userSpan.classList.remove("error");
            // userSpan.classList.add("right");

            // 
            userSpan.className = "user_span right";
        }else{
            userSpan.textContent = "由数字、大小写字母、_、$组成,6-12位,且不能以数字开头";    
            // userSpan.style.color = "red"; 
            // userSpan.style.fontSize = "12px"; 
            
            // userSpan.classList.remove("right");
            // userSpan.classList.add("error");

            userSpan.className = "user_span error";
        }
    } */

    // 用户名   
    // 由数字 大小写字母 _ $ 组成 , 6-12位,且不能以数字开头 (一步到位)
    // 从易到难的顺序(拆分判断)
    // a. 长度  6-12位
    // b. 不能以数字开头  
    // c. 由数字 大小写字母 _ $ 组成  (所有的字符都必须在合法字符的范围内,只要有一个不是合法的字符 报错   => 判断字符串中是否能含有非法字符)
    userInp.onblur = function(){
        var user = userInp.value.trim();
        userInp.value = user;

        isUserOk = false;  // 每次失焦 先重置状态为false => 在重新验证

        var lenReg = /^\S{6,12}$/; // 长度验证规则
        var startReg = /^[^0-9]/;  // 非数字开头

        var combReg = /^[\w$]{6,12}$/;  // 包含 字母 数字 下划线 $ (6-12位) =>  所有的字符都必须在合法字符的范围内 不允许出现规则以外的内容
        var illegalReg = /[^\w$]/;  // 是否存在非法字符  => 只要有一个非法的 即失败 


        if(lenReg.test(user)){   // 长度验证

            if(startReg.test(user)){ // 非数字开头
                

                // if(combReg.test(user)){ // 组成 => 所有的都是合法的
                //     userSpan.textContent = "√";   
                //     userSpan.className = "user_span right";
                // }else{
                //     userSpan.textContent = "用户名由数字 字母 下换线 $组成";    
                //     userSpan.className = "user_span error";
                // }

                // illegalReg.test(user) === false
                if(!illegalReg.test(user)){ // 不存在非法字符

                  
                    // 格式全都正确的前提下 => 需要验证用户名是否已被注册 => 配合后端接口
                    var p = AjaxPromise({
                        type:"get",
                        url:"http://121.43.116.41/demo/php/isExistUser.php",
                        data:{
                            user:user,
                        },
                        async:true,
                        dataType:"json",
                    })

                    p.then(res=>{
                        var {status,message} = res;
                            if(status) {  // 可以使用的用户名
                                userSpan.textContent = "√";   
                                userSpan.className = "user_span right";
                                isUserOk = true;
                            }else{
                                userSpan.textContent = message;   
                                userSpan.className = "user_span error";
                            }
                    }).catch(err=>{
                        console.log(err);
                    })


                    /* var xhr = new XMLHttpRequest();

                    xhr.open("get","http://121.43.116.41/demo/php/isExistUser.php?user="+user+"&a=1&b=2",true)

                    xhr.send();

                    xhr.onreadystatechange = function(){
                        if(xhr.readyState == 4 && xhr.status == 200){
                            var res = xhr.responseText;
                            console.log(res);  // json字符串
                            res = JSON.parse(res);
                            console.log(res);  // js对象

                            var {status,message} = res;
                            if(status) {  // 可以使用的用户名
                                userSpan.textContent = "√";   
                                userSpan.className = "user_span right";
                                isUserOk = true;
                            }else{
                                userSpan.textContent = message;   
                                userSpan.className = "user_span error";
                            }

                        }
                    } */

                }else{
                    userSpan.textContent = "用户名由数字 字母 下换线 $组成";    
                    userSpan.className = "user_span error";
                }

            }else{
                userSpan.textContent = "用户名不能以数字开头";    
                userSpan.className = "user_span error";
            }

        }else{
            userSpan.textContent = "用户名需要在6-12位之间";    
            userSpan.className = "user_span error";
        }
    } 




    pwdInp.onblur = function(){
        var pwd = pwdInp.value;
        var reg = /^[\w$]{6,12}$/;

        isPwdOk = false;

        if(reg.test(pwd)){  // 密码格式正确
            

            // 判断密码强度
            // 数字 大写 小写  特殊字符(_ $) 四者中出现几种 
            // 1种 弱
            // 2种 中
            // 3种 强
            // 4种 超强

            var isExistNum = /[0-9]/.test(pwd);
            var isExistBig = /[A-Z]/.test(pwd);
            var isExistSmall = /[a-z]/.test(pwd);
            var isExistSpe = /[_$]/.test(pwd);

            var level = isExistNum + isExistBig + isExistSmall + isExistSpe;
            console.log(level);

            switch(level){
                case 1: pwdSpan.textContent="弱"; break;
                case 2: pwdSpan.textContent="中"; break;
                case 3: pwdSpan.textContent="强"; break;
                case 4: pwdSpan.textContent="超强"; break;
            }

            // pwdSpan.textContent = "√";   
            pwdSpan.className = "pwd_span right";

            isPwdOk = true;
        }else{
            pwdSpan.textContent = "由数字、大小写字母、_、$组成,6-12位";    
            pwdSpan.className = "pwd_span error";
        }
    }


    phoneInp.onblur = function(){
        var phone = phoneInp.value.trim();
        var reg = /^1[3-9]\w{9}$/;
        
        isPhoneOk = false;

        if(reg.test(phone)){ 


            var p = AjaxPromise({
                type:"get",
                url:"http://121.43.116.41/demo/php/isExistPhone.php",
                data:{
                    phone:phone,
                },
                async:true,
                dataType:"json",
            })

            p.then(res=>{
                var {status,message} = res;
                if(status) {  // 可以使用的手机号
                    phoneSpan.textContent = "√";   
                    phoneSpan.className = "phone_span right";
                    isPhoneOk = true;
                }else{
                    phoneSpan.textContent = message;   
                    phoneSpan.className = "user_span error";
                }
            }).catch(err=>{
                console.log(err);
            })
           

              // 格式全都正确的前提下 => 需要验证用户名是否已被注册 => 配合后端接口

            /* var xhr = new XMLHttpRequest();

            xhr.open("get","http://121.43.116.41/demo/php/isExistPhone.php?phone="+phone,true)

            xhr.send();

            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status == 200){
                    var res = xhr.responseText;
                    console.log(res);  // json字符串
                    res = JSON.parse(res);
                    console.log(res);  // js对象

                    var {status,message} = res;
                    if(status) {  // 可以使用的手机号
                        phoneSpan.textContent = "√";   
                        phoneSpan.className = "phone_span right";
                        isPhoneOk = true;
                    }else{
                        phoneSpan.textContent = message;   
                        phoneSpan.className = "user_span error";
                    }

                }
            } */


        }else{
            phoneSpan.textContent = "请输入正确的手机号";    
            phoneSpan.className = "phone_span error";
        }
    }

    emailInp.onblur = function(){
        var email = emailInp.value.trim();
        var reg = /^\w+@\w+\.\w+$/;
        isEmailOk = false;
        
        if(reg.test(email)){ 
          
            var p = AjaxPromise({
                type:"get",
                url:"http://121.43.116.41/demo/php/isExistEmail.php",
                data:{
                    email:email,
                },
                async:true,
                dataType:"json",
            })

            p.then(res=>{
                var {status,message} = res;
                if(status) {  // 可以使用的邮箱
                    emailSpan.textContent = "√";   
                    emailSpan.className = "email_span right";
                    isEmailOk = true;
                }else{
                    emailSpan.textContent = message;   
                    emailSpan.className = "user_span error";
                }
            }).catch(err=>{
                console.log(err);
            })
           

            /* var xhr = new XMLHttpRequest();

            xhr.open("get","http://121.43.116.41/demo/php/isExistEmail.php?email="+email,true)

            xhr.send();

            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status == 200){
                    var res = xhr.responseText;
                    console.log(res);  // json字符串
                    res = JSON.parse(res);
                    console.log(res);  // js对象

                    var {status,message} = res;
                    if(status) {  // 可以使用的邮箱
                        emailSpan.textContent = "√";   
                        emailSpan.className = "email_span right";
                        isEmailOk = true;
                    }else{
                        emailSpan.textContent = message;   
                        emailSpan.className = "user_span error";
                    }

                }
            }
 */
        }else{
            emailSpan.textContent = "请输入正确的邮箱";    
            emailSpan.className = "email_span error";
        }
    }


    btn.onclick = function(){
        // if(isUserOk && isPwdOk && isPhoneOk && isEmailOk){
        //     alert("可以注册");
        // }else{
        //     alert("请填入正确信息");
        // }

        if(!isUserOk){ // isUserOk == false
            alert("用户名有误,请先修改用户名");
        }else if(!isPwdOk){
            alert("密码有误,请先修改用户名");
        }else if(!isPhoneOk){
            alert("手机好有误,请先修改用户名");
        }else if(!isEmailOk){
            alert("邮箱有误,请先修改用户名");
        }else{
            // alert("可以注册");

            var user = userInp.value;
            var pwd = pwdInp.value;
            var phone = phoneInp.value;
            var email = emailInp.value;

            // 以post方式传递数据时
            // 1. 提前设置请求头,修改数据传输类型(application/x-www-form-urlencoded  => FormData格式(form表单post的默认格式)) 
            // 2. 将参数数据队列放到请求主体中,随header(请求头)一同传递给服务端   => 作为xhr.send()方法的实际参数传入

            // 请求头 => 客户端向服务端发送请求时, 服务器需要的一些信息 (对象的形式存在->键值对)

            // application/x-www-form-urlencoded  => form表单post的默认格式。
            // application/json     


            var p = AjaxPromise({
                type:"post",
                url:"http://121.43.116.41/demo/php/register.php",
                data:{
                    user,
                    pwd,
                    phone,
                    email,
                },
                async:true,
                dataType:"json",
            })

            p.then(res=>{
                var {status,message} = res;
                if(status){
                    location.href ="./login.html"
                }else{
                    alert(message);
                }
            }).catch(err=>{
                console.log(err);
            })




            /* // post请求
            var xhr = new XMLHttpRequest();

            xhr.open("post","http://121.43.116.41/demo/php/register.php",true)

            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            // xhr.send("user="+user+"&pwd="+pwd+"&phone="+phone+"&email="+email)
            xhr.send(`user=${user}&pwd=${pwd}&phone=${phone}&email=${email}`)

            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status == 200){
                    var res = xhr.responseText;
                    console.log(res);  // json字符串
                    res = JSON.parse(res);
                    console.log(res);  // js对象

                    var {status,message} = res;
                    if(status){
                        location.href ="./login.html"
                    }else{
                        alert(message);
                    }

                

                }
            } */


        }
    }
</script>

</html>